<template>
  <teleport to="#target-div">
    <div class="modal-wrapper" v-if="props.visible">
      <div class="modal">
        <slot></slot>
        <footer>
          <button @click="cancel">取消</button>
          <button>确定</button>
        </footer>
      </div>
    </div></teleport>
</template>

<script setup lang="ts">
const props = defineProps<{ visible: false }>();
const emit = defineEmits(["update:visible"]);
const cancel = () => {
  emit("update:visible", false);
};
</script>

<style scoped lang="scss">
.modal-wrapper {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    padding: 20px;
    width: 500px;

    footer {
      text-align: right;
      margin-top: 10px;
      button {
        margin-right: 10px;
      }
    }
  }
}
</style>